<template>
  <div class="BooklList">
    <div class="head" v-show="dels">
      <div class="ift-back" @click="returns"></div>
      <h1>我的书单</h1>
      <div class="ift-manage" @click="del"></div>
    </div>
    <div class="head" v-show="!dels">
      <div @click="del" class="cancel">取消</div>
      <h1>我的书单</h1>
      <div></div>
    </div>
    <div class="have">
      <div class="free">
        <div class="images">
          <div v-if="dels">
            <div
              class="degree-of-heat"
              v-for="(item, index) in image"
              :key="index"
              @click="details(item.name)"
            >
              <img :src="item.url" alt="" />
              <i class="choice" v-show="!dels">
                <p v-show="!item.flag"></p>
                <p v-show="item.flag" class="iconfont icon-dagou"></p>
              </i>
              <div class="Number-of-people">{{ item.name }}</div>
            </div>
          </div>
          <div v-if="!dels">
            <div
              class="degree-of-heat"
              v-for="(item, index) in image"
              :key="index"
              @click="flags(index)"
            >
              <img :src="item.url" alt="" />
              <i class="choice" v-show="!dels">
                <p v-show="!item.flag"></p>
                <p v-show="item.flag" class="iconfont icon-dagou"></p>
              </i>
              <div class="Number-of-people">{{ item.name }}</div>
            </div>
          </div>
          <div class="degree-of-heat" @click="establish" v-show="dels">
            <div class="img">
              <i class="ift-add"></i>
            </div>
            <div class="Number-of-people">添加书单</div>
          </div>
        </div>
      </div>
    </div>
    <div class="buttom" v-show="!dels">
      <div>
        <p v-show="SelectAll"><span class="ift-multOpt"></span> 全选</p>
        <p v-show="!SelectAll"><span class="ift-multOpt"></span> 取消全选</p>
      </div>
      <div>
        <span class="ift-del" @click="DeleteData">
          删除({{ delquantity }})</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image: [],
      dels: true,
      SelectAll: true,
      delquantity: 0,
    };
  },
  methods: {
    flags(index) {
      this.image[index].flag = !this.image[index].flag;
    },
    establish() {
      this.$router.push("/my/establish");
    },
    returns() {
      this.$router.go("-1");
    },
    del() {
      // localStorage.clear();
      // this.image = JSON.parse(localStorage.getItem("BookSingleName"));
      this.dels = !this.dels;
    },
    DeleteData() {
      this.image.forEach((item,index) => {
        if (item.flag) {
          this.image.splice(index, 1);
        }
      });
      localStorage.setItem("BookSingleName", JSON.stringify(this.image));
      this.dels = !this.dels;
    },
    details(name) {
      this.$router.push({ name: "RevisionList", query: { name: name } });
    },
  },
  created() {
    this.image = JSON.parse(localStorage.getItem("BookSingleName"));
  },
  watch: {
    delquantity() {},
  },
};
</script>
<style lang="less">
.BooklList {
  .head {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    .cancel {
      font-size: 14px;
      color: black;
    }
    div {
      width: 45px;
      font-size: 20px;
      color: #fc6976;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
    }
  }
  .have {
    .free {
      width: 94%;
      margin: 10px auto;
      border-radius: 5px;
      .images {
        text-align: center;
        .degree-of-heat {
          float: left;
          margin: 0 1.6% 5px;
          width: 30%;
          position: relative;
          .choice {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            position: absolute;
            bottom: 20%;
            right: 0;
            padding: 1px;
            border-radius: 50%;
            p {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              margin: 0;
              font-size: 12px;
              &:nth-child(1) {
                background-color: rgba(0, 0, 0, 0.6);
                box-sizing: border-box;
                border: 1px solid white;
              }
              &:nth-child(2) {
                background-color: #fc6976;
                color: white;
              }
            }
          }
          img {
            width: 100%;
            height: 70%;
          }
          .img {
            width: 100%;
            padding-bottom: 133%;
            box-shadow: 0 0 10px #f5c4d2;
            position: relative;
            i {
              position: absolute;
              left: 50%;
              top: 50%;
              font-size: 40px;
              color: #ffd6d3;
              transform: translate(-50%, -50%);
            }
          }
          .Number-of-people {
            padding: 5px 2px;
            color: #999;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span {
              margin-right: 2px;
            }
          }
        }
        .add {
          width: 28%;
          font-size: 14px;
          margin-bottom: 15%;
        }
      }
    }
  }
  .buttom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #63605e;
    box-shadow: 0 0 3px #f5c4d2;
    font-size: 12px;
    div {
      width: 50%;
      height: 20px;
      &:nth-child(1) {
        border-right: 2px solid #dedede;
      }
      p {
        margin: 0;
      }
    }
  }
}
</style>